.container {
    width: 500px;

    height: 50px;

    margin: 100px auto;

}



.parent {
    width: 100%;

    height: 42px;

    top: 4px;

    position: relative;

}



.parent>input:first-of-type {
    /*输入框高度设置为40px, border占据2px，总高度为42px*/

    width: 380px;

    height: 40px;

    border: 1px solid #ccc;

    font-size: 16px;

    outline: none;

}



.parent>input:first-of-type:focus {
    border: 1px solid #317ef3;

    padding-left: 10px;

}



.parent>input:last-of-type {
    /*button按钮border并不占据外围大小，设置高度42px*/

    width: 150px;

    height: 44px;

    position: absolute;

    background: #317ef3;

    border: 1px solid #317ef3;

    color: #fff;

    font-size: 16px;

    outline: none;

}
.post{
    margin-top: 3px;
    background-color: white;
    height: 64px;
}
.post-head{
    width: 64px;
    height: 64px;
    float: left;
}
.post-head img{
    width: 50px;
    height: 50px;
    margin: 7px;
}
.post-title{
    width: 461px;
    float: left;
    height: 50px;
    margin: 10px;
}
.post-title-text{
    width: 440px;
    height: 22px;
    overflow: hidden;/*标题保持一行 多余hidden*/
    line-height: 28px;
}
.post-info-text{
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
    word-break:break-all;
}

/*********************辅助样式************************/
/* 清除浮动 */
.clearfix{
    *zoom: 1;
}
.clearfix::after{
    content:".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/* 垂直居中 */
.v-center{
    position: relative;
    top: 50%;
    transform: translateY(-50%);/*y值移动负50%即向上移动自身宽度的50%*/
}
/* 水平居中 */
.h-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
a{
    text-decoration: none;
    color: black;
}
